<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: inline-block;
      border: 5px solid #f00;
    }

    .container .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      /* 
        CSS transform属性允许对某一个元素进行某些形变，包括旋转，缩放，倾斜或平移等。
        transform: translate(100px, 100px); 表示沿着X轴和Y轴移动盒子，向右移动100像素，向下移动100像素。
        transition: all 0.5s; 表示所有属性的变化都将在0.5秒内平滑过渡。

        注意事项，并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变  
        span,a,strong,em等元素都不能进行形变转换，但是可以通过设置display:inline-block;
        或者display:block;来改变元素的显示类型，使之可以进行transform的形变转换操作)

        transform语法：
        transform: function1 function2 ... functionN; 
        transform: transform-list; 
          transform: translate(100px, 100px);平移 表示沿着X轴和Y轴移动盒子，向右移动100像素，向下移动100像素。
          transform: rotate(45deg);旋转 表示将盒子旋转45度。
          transform: scale(1.5);缩放 表示将盒子放大到原来的1.5倍。
          transform: skew(30deg);倾斜 表示将盒子倾斜30度。
          transform: matrix(1, 0.5, -0.5, 1, 0, 0); 表示使用矩阵进行形变转换。
          transform: translate(100px, 100px) rotate(45deg) scale(1.5) skew(30deg); 表示将盒子沿着X轴
          和Y轴移动100像素，旋转45度，放大到原来的1.5倍，倾斜30度。
        
      */
      transform: translate(100px, 100px); /* 移动盒子 */
      /* 
          口这个CSS函数用于移动元素在平面上的位置。
          口translate本身可以表示翻译的意思，在物理上也可以表示平移；
          值个数
            口一个值时，设置x轴上的位移
            口二个值时，设置x轴和y轴上的位移
          值类型：
            口数字：100px
            口百分比：参照元素本身(refer to the size of bounding box)
      */
      /* transition: all 0.5s; 平滑过渡效果 */

       
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>